<template>
  <div>
     <h1>鼠标x:{{x}}</h1> 
     <h1>鼠标y:{{y}}</h1>
     <h1>计算属性：{{xCom  }}</h1>
     <h1>计算属性：{{yCom  }}</h1>
     <button @click="say">点击查看位置</button>
      <input v-model="text" />
      <h1>{{text}}</h1>
  </div>
</template>
<script setup>
import {useId,triggerRef,shallowRef,watchEffect,reactive,toRaw,markRaw  } from 'vue'
 import {useMouse} from './useMouse'
//  在 Vue 3 中，Hooks 是指一系列可以复用的函数，它们允许你在组件中复用逻辑

// 鼠标练习  抽离鼠标显示位置功能的hooks函数
 let {x,y,xCom,yCom,say}=useMouse()
//  
import { useDebouncedRef } from './bounceRef'
const text = useDebouncedRef('hello',3000)
//  用于为无障碍属性或表单元素生成每个应用内唯一的 ID。
 let id=useId();
 
 console.log(id,'-----------')





const shallow = shallowRef({
  greet: 'Hello, world'
})

// 触发该副作用第一次应该会打印 "Hello, world"
watchEffect(() => {
  console.log(shallow.value.greet)
})

// 这次变更不应触发副作用，因为这个 ref 是浅层的
shallow.value.greet = 'Hello, universe'

// 打印 "Hello, universe"
triggerRef(shallow) //可以收集到浅响应的变化
// toRaw 根据一个 Vue 创建的代理返回其原始对象。
// 将reactive对象 转换成普通对象
let state=reactive({
  name:1,
  age:2
})
let obj=toRaw(state)
console.log(obj,"obj---------")

// markRaw()将一个对象标记为不可被转为代理。返回该对象本身。
// 被markRaw 后无法转换成响应是对象
const foo = markRaw({
  name: 'foo',
  age:28
})
let foostate=reactive(foo)

// customRef（）创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式


</script>